<!DOCTYPE html>
<html lang="en">
<body>
    <div id="test">
    </div>
    <!--子模版嵌套-->
    <div id="test1"></div>

<script id="tpl" type="text/template">
    <ul>
        {@each list as it,index}
        <li>${it.name|log} (index: ${index})</li>
        {@/each}
        {@each blah as it}
        <li>
            num: ${it.num} <br/>
            {@if it.num==3}
            {@each it.inner as it2}
            ${it2.time} <br/>
            {@/each}
            {@/if}
        </li>
        {@/each}
        {@each i in range(5, 10)}
        <li>
            ${i} {#输出 5;6;7;8;9;}
        </li>
        {@/each}
    </ul>
</script>
</body>
<head>
    <meta charset="UTF-8">
    <title>JuicerTest</title>
    <script type="text/javascript" src="js/lib/jquery-2.2.1.min.js"></script>
    <script type="text/javascript" src="js/lib/juicer-min.js"></script>
    <script type="text/javascript">
        var data = {
            list: [
                {name:' guokai', show: true},
                {name:' benben', show: false},
                {name:' dierbaby', show: true}
            ],
            blah: [
                {num: 1},
                {num: 2},
                {num: 3, inner:[
                    {'time': '15:00'},
                    {'time': '16:00'},
                    {'time': '17:00'},
                    {'time': '18:00'}
                ]},
                {num: 4}
            ]
        };
        /*记录日志*/
        function log(data){
            console.log(data);
            return data;
        }
        /**/

        juicer.register("log",log);
        var tpl = $("#tpl").text();
        var html = juicer(tpl, data);
        $("#test").html(html);
        /*子模版嵌套*/
        var tpl = 'Hi, {@include subTpl, subData}, End.';
        html = juicer(tpl, {
            subTpl: "I'm sub content, ${name|log}",
            subData: {
                name: 'juicer'
            }
        });
        $("#test1").html(html);


    </script>
</head>
</html>